<template>
    <div>
        <!-- --------------------My-----订单信息组件 -->
        <div class="account-msgBox">
            <div class="account-title">订单信息</div>
            <ul>
                <li class="account-li" v-for="(item,index) in Account" :key="index">
                    <div class="account-img"><img :src="Account[index].smallImg" alt=""></div>
                    <div class="account-msg">
                        <div class="zh-name">
                            <span>{{item.name}}</span>
                            <span>{{item.rule}}</span>
                        </div>
                        <div class="en-name">{{item.enname}}</div>
                        <div class="account-price">&yen;{{item.price}}</div>
                        <div class="account-count">X{{item.count}}</div>
                    </div>
                </li>
            </ul>
                    <!-- 删除订单 -->
                    <div class="del-account" @click="delAccount(Account[0].oid)" v-if="accItem.status==2"><van-icon name="delete-o" /></div>
            <!-- 向内凹陷的两个圆角 -->
            <div class="cro_left_bottom cro"></div>
            <div class="cro_right_bottom cro"></div>

            <!-- 订单时间 总价 -->
                    <!-- 向内凹陷的两个圆角 -->
            <div class="orderTimeTotal">
                    <div class="cro_left_top cro"></div>
                    <div class="cro_right_top cro"></div>
                <div class="order-time">{{Account[0].createdAt}}</div>
                <div class="order-count-total">
                    <div class="order-count">{{counts}}件</div>
                    <div class="order-total">&yen;{{totalPrice}}</div>
                </div>
                <!-- 确认收货  & 已完成 -->
                <div class="confirm"><span @click="confirm">{{accItem.status==1?'确认收货':'已完成'}}</span></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        // 接收App.vue的reload依赖
        inject:['reload'],
        props:{
            Account:{
                type:Array,
                default(){
                    return []
                }
            },
            accItem:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        created() {
            console.log('accItem',this.accItem);
        },
        mounted() {
                
        },
        computed:{
            // 件数
             counts:function(){
                let counts=0
                for(let i =0;i<this.Account.length;i++){
                   counts += this.Account[i].count
                }
                return counts
            },
            // 总价
             totalPrice:function(){
                let tPrice=0
                for(let i =0;i<this.Account.length;i++){
                   tPrice += this.Account[i].count*this.Account[i].price
                }
                return tPrice
            }
        },
        methods: {
            // 确认收货按钮  要先判断状态
            confirm(){
                if(this.accItem.status==1){
                        this.axios({
                        method:'post',
                        url:'/receive',
                        data:{
                            oid:this.accItem.oid
                        }
                    }).then(res=>{
                        console.log('res==>',res);
                        this.$toast(res.data.msg)
                        setTimeout(() => {
                           this.reload();
                        }, 1000);
                    }).catch(err=>{
                        console.log('err',err);
                    })
                }
            },
            // 删除订单
            delAccount(soid){
                console.log(this.Account);
                console.log('oid==>',soid);
                this.axios({
                    method:'post',
                    url:'/removeOrder',
                    data:{
                        oid:soid
                    }
                }).then(res=>{
                    console.log('res==>',res);
                    this.$toast(res.data.msg)
                    setTimeout(() => {
                        this.reload();
                    }, 1000);
                }).catch(err=>{
                    console.log('err',err);
                })

                
            }
        },
    }
</script>

<style lang="less" scoped>
// 确认收货
.confirm{
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    color: #666;
    background-color: #f7f7f7;
}
// 订单信息
.account-msgBox{
    width: 355px;
    margin: 30px  auto 0 auto;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    .account-title{
        font-size: 14px;
        color: #666;
    }
    // 删除订单图标
    .del-account{
        position: absolute;
        top: 15px;
        right: 5px;
        color: #666;
    }
}
.account-li{
    height: 80px;
    // background-color: antiquewhite;
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    .account-img{
        flex: 1;
        // width: 65px;
        img{
            width: 65px;
            height: 65px;
            margin-top: 8px;
        }
    }
    .account-msg{
        flex: 3;
        position: relative;
        width: 250px;
        .zh-name{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & span:first-child{
                font-size: 16px;
                color: #666;
                margin-right: 10px;
            }
            & span:last-child{
                font-size: 14px;
                color: #666;
            }
        }
        .en-name{
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .account-price{
            color: #0c34ba;
            font-size: 16px;
            margin-top: 10px;
            font-weight: bold;
        }
        .account-count{
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 14px;
            color: #666;
        }
    }
}
// 向内凹陷两个盒子
.cro{
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #f7f7f7;
    z-index: 1;
    background: #f7f7f7;
}
.cro_right_bottom{
    right: -1px;
    bottom: -1px;
    border-radius: 10px 0 0 0;
    border-top: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;
}
.cro_left_bottom {
    left: -1px;
    bottom: -1px;
    border-radius: 0 10px 0 0;
    border-top: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
}
.cro_left_top{
    left: -1px;
    top: -1px;
    border-radius: 0 0 10px 0;
    border-top: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
}
.cro_right_top{
    right: -1px;
    top: -1px;
    border-radius: 0 0 0 10px;
    border-top: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;
}
// 订单时间 总价
.orderTimeTotal{
    width: 355px;
    height: 80px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border-top:1px #666 dashed;
    .order-time{
        margin-top: 10px;
        font-size: 14px;
        color: #666;
    }
    .order-count-total{
        display: flex;
        margin-top: 10px;
        .order-count{
            font-size: 16px;
            flex: 1;
        }
        .order-total{
            font-size: 16px;
            font-weight: bold;
            color: #0c34ba;
            flex: 1;
            text-align: right;
        }
    }
}
</style>